import { View } from "@tarojs/components";

type TabsProps = {
  active: any;
  className?: string;
  items: { label: string; value?: any; [key: string]: any }[];

  mode?: "none" | "auto";
};

type TabsEvents = {
  onChange?: (e: any) => void;
};

export default ({
  mode = "none",
  active,
  items,
  className,
  onChange,
}: TabsProps & TabsEvents) => {
  return (
    <View className={`flex justify-between -mx-1 ${className}`}>
      {items.map((item, index) => (
        <View
          key={index}
          className={`py-2 px-3 text-center rounded-md mx-1 duration-200 text-sm whitespace-pre ${
            mode == "none" ? "flex-none" : "flex-1"
          }} ${
            (item.value ?? index) === active
              ? "bg-[#22252A] text-white"
              : "bg-[#286BE50C]"
          }`}
          onClick={() => onChange?.(item.value ?? index)}
        >
          {item.label}
        </View>
      ))}
    </View>
  );
};
